<template>
  <div class="tp">
    <Header />

    <Content>
      <div class="cp">
        <div class="card">
          <BasicTable @register="registerTable" :resizeHeightOffset="44">
            <template #signName="{ record }">
              <a-button danger @click="onSave"> 仅核销</a-button>
              <!-- <img :src="record.signName" alt="" style="width: 160px; object-fit: contain" /> -->
            </template>
          </BasicTable>
        </div>
      </div>
    </Content>

    <Detail @register="registerDetail" />
  </div>
</template>

<script setup>
  import { defineOptions, h } from 'vue';

  import { BasicTable, useTable } from '@/components/Table';

  import Header from '@/widget/header.vue';
  import Content from '@/widget/content.vue';
  import { PAGE } from '@/api/http';
  import { getLabel, moveTypeCodeList, moveTypeO } from '@/api/ds';

  import ProImgCell from '@/widget/pro-img-cell.vue';

  import { useDrawer } from '@/components/Drawer';
  import Detail from './out-in-detail.vue';

  defineOptions({ name: 'StockOutIn' });

  const [registerDetail, { openDrawer }] = useDrawer();

  const [registerTable] = useTable({
    api: PAGE('/product/storeOrDeliverDetailList'),
    immediate: false,

    beforeFetch: (arg) => {
      arg.stockType = 'O';
      return arg;
    },
    formConfig: {
      baseColProps: { style: { paddingRight: '12px' } },
      actionColOptions: { span: 4 },
      schemas: [
        {
          field: 'moveCode',
          component: 'Input',
          componentProps: {
            placeholder: ' 输入单据号搜索',
          },
          colProps: { span: 5 },
        },

        {
          field: 'goodsName',
          component: 'Input',
          componentProps: {
            placeholder: ' 输入商品名称搜索',
          },
          colProps: { span: 5 },
        },

        {
          field: 'moveType',
          component: 'Select',
          componentProps: {
            placeholder: '单据类型',
            options: moveTypeO,
          },
          colProps: { span: 5 },
        },

        {
          field: 'moveTypeCode',
          component: 'Select',
          componentProps: {
            placeholder: '单据原因',
            options: moveTypeCodeList,
          },
          colProps: { span: 5 },
        },
      ],
    },
    columns: [
      {
        title: '商品名称',
        dataIndex: 'goodsName',
        ellipsis: false,
        width: 290,
        customRender: ({ value: title, record }) =>
          h(ProImgCell, { src: record.goodsImage, title }),
      },

      {
        title: '变更数量',
        dataIndex: 'stockQty',
        ellipsis: false,
        customRender: ({ value, record }) => `${value || '0'}${record.saleUnit || ''}`,
      },
      {
        title: '单据号',
        dataIndex: 'moveCode',
        ellipsis: false,
        customRender: ({ value, record }) =>
          h(
            'a',
            {
              onClick: () => {
                const { moveType, moveCode } = record;
                openDrawer(true, { moveType, moveCode });
              },
            },
            value,
          ),
        width: 190,
      },

      {
        title: '关联单号',
        dataIndex: 'exOrderSn',
        ellipsis: false,
        width: 190,
      },

      {
        title: '单据类型',
        dataIndex: 'moveType',
        ellipsis: false,
        customRender: ({ value }) => getLabel(moveTypeO, value),
      },

      {
        title: '变动原因',
        dataIndex: 'moveTypeCode',
        ellipsis: false,
        customRender: ({ value }) => getLabel(moveTypeCodeList, value),
      },

      {
        title: '变动时间',
        dataIndex: 'addTime',
        ellipsis: false,
        width: 190,
      },

      {
        title: '操作人',
        dataIndex: 'employeesName',
        ellipsis: false,
      },
    ],
    useSearchForm: true,
    showTableSetting: false,
    bordered: true,
    showIndexColumn: false,
    rowKey: 'id',
  });
</script>
<style lang="less" scoped>
  .card {
    padding: 12px;
  }
</style>
